<template>
  <InlineLayout title-name="人员信息列表">
    <template #header>
      <my-form ref="ruleForm" v-model:modelValue="dataForm" :model="dataForm" :items-datas="itemsDatas">
        <my-button type="reset" title="重置" @click="reset" />
        <my-button v-loading="loading" type="search" title="查询" @click="search" />
      </my-form>
    </template>

    <template #titleTools>
      <my-button v-hasPermi="['yuanshidian:ab02:add']" type="add" title="新增人员" @click="addClick" />
      <my-button v-hasPermi="['yuanshidian:ab01:export']" type="export" title="人员导出" @click="handleExport" />
    </template>
    <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
      <el-tab-pane label="在职人员" name="first" />
      <el-tab-pane label="离退人员" name="second" />
      <el-tab-pane label="异动人员" name="third" />
    </el-tabs>
    <my-table
      v-loading="loading"
      :columns="activeName === 'third' ? columns1 : columns"
      :table-data="tableData"
      @selection-change="handleSelectionChange"
    >
      <template #status="scope">
        <span v-if="scope.row.status === 1">待提交</span>
        <span v-if="scope.row.status === 2" style="color: #e6a23c">审核中</span>
        <span v-if="scope.row.status === 3" style="color: #67c23a">已审核</span>
        <span v-if="scope.row.status === 4" style="color: #f56c6c">驳回</span>
      </template>
      <template #ryType="scope">
        <span v-if="scope.row.ryType === 1">在职人员</span>
        <span v-if="scope.row.ryType === 2">离退人员</span>
        <span v-if="scope.row.ryType === 3">异动人员</span>
      </template>
      <template #refStatus="scope">
        <span v-if="scope.row.refStatus === 0">未退费</span>
        <span v-if="scope.row.refStatus === 1">已退费</span>
      </template>

      <template #operation="scope">
        <el-upload
          v-if="scope.row.status === 1 || scope.row.status === 4"
          v-hasPermi="['yuanshidian:ab02:ab02upload']"
          class="upload-demo"
          :action="uploadImgUrl"
          :on-preview="handlePreview"
          :on-remove="handleRemove"
          name="file"
          :show-file-list="false"
          :data="paramsDataObj"
          :on-success="handleSuccess"
          :on-error="handleError"
          :headers="headers"
          :limit="1"
          style="display: inline-block"
          :file-list="fileList"
        >
          <el-button link type="primary" @click="updateFile(scope.row)">上传附件</el-button>
        </el-upload>
        <my-button type="text" @click="lookFile(scope.row)">查看附件</my-button>
        <my-button type="text" @click="handleDetail(scope.row)">详情</my-button>
        <my-button
          v-if="scope.row.status === 1 || scope.row.status === 4"
          v-hasPermi="['yuanshidian:ab02:edit']"
          type="text"
          @click="handleEdit(scope.row)"
          >修改</my-button
        >
        <my-button
          v-if="scope.row.status === 1 || scope.row.status === 4"
          v-hasPermi="['yuanshidian:ab02:submit']"
          type="text"
          @click="handleAudit(scope.row)"
          >提交</my-button
        >
        <el-button v-if="scope.row.status === 2" v-hasPermi="['yuanshidian:ab02:examine']" link type="primary" @click="handleDialogAudit(scope.row)"
          >审核</el-button
        >
        <my-button v-if="scope.row.status === 3" link type="text" expand-type="danger" @click="handleReturn(scope.row)">驳回</my-button>
        <!-- <my-button link type="primary" title="人员缴费导出" @click="handleRefund(scope.row)" /> -->
        <my-button v-if="scope.row.status === 3" type="text" @click="handleContrast(scope.row)">比对</my-button>
        <my-button
          v-if="scope.row.status === 1 || scope.row.status === 4"
          v-hasPermi="['yuanshidian:ab02:remove']"
          type="text"
          @click="handleDelete(scope.row)"
          >删除</my-button
        >
        <!-- <my-button type="text">审核记录</my-button> -->
      </template>
    </my-table>
    <template #footer>
      <pagination v-model:page="dataForm.pageNum" v-model:limit="dataForm.pageSize" :total="total" @pagination="getList" />
    </template>
  </InlineLayout>
  <addOrEdit v-model="visible" :dialog-title="title" :current-row="currentRow" @ini-search="search" />
  <contrast v-model="isShow" :current-row="currentRow" />
  <audit v-model="auditIsShow" :current-row="currentRow" @audit-sumbit="auditSumit" />
  <exportList v-model="isEXShow" :dialog-title="title" :current-row="currentRow" />
</template>
<script setup lang="ts">
import { ref, onMounted } from 'vue';
import addOrEdit from './components/addOrEdit.vue';
import contrast from './components/contrast.vue';
import exportList from './components/exportList.vue';
import { addAb02new } from '@/api/yuanshidian/ab02new';
import { listAb02, delAb02, submit, examine, turndownab02 } from '@/api/yuanshidian/ab02/index';
import { globalHeaders } from '@/utils/request';
import audit from '@/views/components/audit/index.vue';
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const total = ref(0);
const recordShow = ref(false);
const activeName = ref('first');
const ruleForm = ref<ElFormInstance>();
const loading = ref(false);
const ids = ref<Array<string | number>>([]);
const single = ref(true);
const multiple = ref(true);
const headers = ref(globalHeaders());
const baseUrl = import.meta.env.VITE_APP_BASE_API;
const flieUrl = '/yuanshidian/ab02/ab02upload';
const uploadImgUrl = ref(baseUrl + flieUrl); // 上传的图片服务器地址
const fileList = ref([]);
const paramsDataObj = ref({});
const state = reactive({
  visible: false,
  isShow: false,
  auditIsShow: false,
  isEXShow: false,
  title: '',
  dataForm: {
    pageNum: 1,
    delStatus: 0,
    pageSize: 10
  },
  currentRow: {},
  itemsDatas: [
    { label: '单位编码', prop: 'dw01', type: 'input' },
    { label: '单位名称', prop: 'dw02', type: 'input' },
    { label: '姓名', prop: 'gr04', type: 'input' },
    { label: '证件号码', prop: 'gr02', type: 'input' }
  ],

  tableData: [],
  columns: [
    { label: '序号', type: 'index', width: '55', prop: 'index' },
    { type: 'selection' },
    { label: '统筹区编码', prop: 'aaa027', align: 'center', width: '100px' },
    { label: '单位名称', prop: 'dw02', align: 'center' },
    { label: '个人编号', prop: 'gr01', align: 'center' },
    { label: '身份证号码', prop: 'gr02', align: 'center', width: '100px' },
    { label: '姓名', prop: 'gr04', align: 'center', width: '90px' },
    { label: '个人账号', prop: 'gr03', align: 'center' },
    { label: '性别', prop: 'gr05', align: 'center', width: '70px' },
    { label: '出生年月', prop: 'gr07', align: 'center' },
    { label: '单位编码', prop: 'dw01', align: 'center' },
    { label: '民族', prop: 'gr06', align: 'center', width: '70px' },
    { label: '数据状态', prop: 'status', align: 'center', type: 'custom', slot: 'status', width: '80' },
    { label: '人员类型', prop: 'ryType', align: 'center', type: 'custom', slot: 'ryType' },
    { label: '转入开始月', prop: 'zrStartmonth', align: 'center', width: '100px' },
    { label: '转入截至月', prop: 'zrEndmonth', align: 'center', width: '100px' },
    { label: '转入金额', prop: 'zrAmount', align: 'center' },
    { label: '退费状态', prop: 'refStatus', align: 'center', type: 'custom', slot: 'refStatus' },
    { label: '操作', type: 'operation', minWidth: '340px' }
  ],
  columns1: [
    { label: '序号', type: 'index', width: '55', prop: 'index' },
    { type: 'selection' },
    { label: '统筹区编码', prop: 'aaa027', align: 'center', width: '100px' },
    { label: '单位名称', prop: 'dw02', align: 'center' },
    { label: '异动类型', prop: 'ydType', align: 'center' },
    { label: '个人编号', prop: 'gr01', align: 'center' },
    { label: '身份证号码', prop: 'gr02', align: 'center', width: '100px' },
    { label: '姓名', prop: 'gr04', align: 'center', width: '90px' },
    { label: '个人账号', prop: 'gr03', align: 'center' },
    { label: '性别', prop: 'gr05', align: 'center', width: '70px' },
    { label: '出生年月', prop: 'gr07', align: 'center' },
    { label: '民族', prop: 'gr06', align: 'center', width: '70px' },
    { label: '数据状态', prop: 'status', align: 'center', type: 'custom', slot: 'status', width: '80' },
    { label: '单位编码', prop: 'dw01', align: 'center' },
    { label: '人员类型', prop: 'ryType', align: 'center', type: 'custom', slot: 'ryType' },
    { label: '转入开始月', prop: 'zrStartmonth', align: 'center', width: '100px' },
    { label: '转入截至月', prop: 'zrEndmonth', align: 'center', width: '100px' },
    { label: '转入金额', prop: 'zrAmount', align: 'center' },
    { label: '退费状态', prop: 'refStatus', align: 'center', type: 'custom', slot: 'refStatus' },
    { label: '操作', type: 'operation', minWidth: '340px' }
  ]
});
const { itemsDatas, tableData, columns, columns1, dataForm, isShow, currentRow, visible, title, auditIsShow, isEXShow } = toRefs(state);
//新增
const addClick = () => {
  title.value = '新增';
  currentRow.value = {
    type: 'add',
    id: '',
    activeName: activeName.value
  };
  visible.value = true;
};
//列表初始化
const getList = async () => {
  loading.value = true;
  dataForm.value.ryType = activeName.value === 'first' ? 1 : activeName.value === 'second' ? 2 : 3;
  var res = await listAb02(dataForm.value);
  tableData.value = res.rows;
  total.value = res.total;
  loading.value = false;
};
// const getList1 = async () => {
//   loading.value = true;
//   var res = await listAb03(dataForm.value);
//   tableData.value = res.rows;
//   total.value = res.total;
//   loading.value = false;
// };
//重置
const reset = () => {
  ruleForm.value?.resetFields();
  search();
};
//查询
const search = () => {
  getList();
};
//tabs切换
const handleClick = (tab) => {
  activeName.value = tab.paneName;
  reset();
};
//查看详情
const handleDetail = (data) => {
  title.value = '详情';
  currentRow.value = {
    id: data.id,
    type: 'detail',
    activeName: activeName.value
  };
  visible.value = true;
};
//修改详情
const handleEdit = (data) => {
  title.value = '修改';
  currentRow.value = {
    id: data.id,
    type: 'editedit',
    activeName: activeName.value
  };
  visible.value = true;
};
//对比
const handleContrast = (row) => {
  currentRow.value = {
    id: row.id,
    activeName: activeName.value
  };
  isShow.value = true;
};
/** 多选框选中数据 */
const handleSelectionChange = (selection) => {
  ids.value = selection.map((item) => item.id);
  single.value = selection.length != 1;
  multiple.value = !selection.length;
};
/** 导出按钮操作 */
const handleExport = () => {
  // var _api = activeName.value === 'first' ? 'yuanshidian/ab02/export' : 'yuanshidian/ab03/export';
  proxy?.download(
    'yuanshidian/ab02/export',
    {
      ...dataForm.value,
      splitID: ids.value.length > 0 ? ids.value.join(',') : ''
    },
    `人员信息_${new Date().getTime()}.xlsx`
  );
};
/** 删除按钮操作 */
const handleDelete = async (row) => {
  const _ids = row?.id;
  await proxy?.$modal.confirm('是否确认删除原单位信息编号为"' + _ids + '"的数据项？').finally(() => (loading.value = false));
  if (activeName.value === 'first') {
    //在职人员
    await delAb02(_ids);
  } else {
    //离退人员
    await delAb03(_ids);
  }
  proxy?.$modal.msgSuccess('删除成功');
  await search();
};
//查看附件
const lookFile = (row) => {
  if (!row.fileurl) {
    proxy?.$modal.msgError('没有可查看的附件');
    return;
  }
  window.open(row.fileurl, '_blank');
};
//上传附件
const updateFile = (data) => {
  paramsDataObj.value.ID = data.id;
};
const handlePreview = () => {};
const handleRemove = () => {};
//附件大小限制
const beforeAvatarUpload = (file) => {
  const isJPG = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'application/pdf';
  const isLt2M = file.size / 1024 / 1024 < 10;
  if (!isJPG) {
    proxy?.$modal.msgError('附件格式为jpg、png、pdf，请重新上传!');
  }
  if (!isLt2M) {
    proxy?.$modal.msgError('上传附件大小不能超过 10MB!');
  }
  return isLt2M && isJPG;
};
//附件上传成功回调
const handleSuccess = (data) => {
  if (data.code === 200) {
    proxy?.$modal.msgSuccess(data.msg);
    fileList.value = [];
    getList();
  } else {
    proxy?.$modal.msgError(data.msg);
  }
};
//附件上传失败回调
const handleError = (data) => {
  proxy?.$modal.msgSuccess(data.msg);
};
//提交
const handleAudit = async (row) => {
  var res = await submit(row.id);
  proxy?.$modal.msgSuccess('提交成功');
  await getList();
};
const handleDialogAudit = (data) => {
  currentRow.value = data;
  auditIsShow.value = true;
};
//审核
const auditSumit = async (data) => {
  var params = {
    ...data,
    //id: currentRow.value.id,
    ryname: currentRow.value.gr04,
    examinedataType: 2
  };
  var res = await examine(params);
  if (res.code === 200) {
    proxy?.$modal.msgSuccess('审核成功');
    addAb02new(currentRow.value);
  }
  getList();
};
//驳回
const handleReturn = async (data) => {
  var res = await turndownab02(data.id);
  if (res.code === 200) {
    proxy?.$modal.msgSuccess('驳回成功');
  }
  getList();
};
/** 缴费办理操作 */
const handleRefund = (row) => {
  currentRow.value = row;
  title.value = '退费办理';
  isEXShow.value = true;
};
onMounted(() => {
  getList();
});
</script>
